<template>
  <baidu-map :center="{lng: 116.403765, lat: 39.914850}" :zoom="11">
    <bm-view class="map"></bm-view>
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <bm-control :offset="{width: '10px', height: '10px'}">
      <bm-auto-complete v-model="keyword" :sugStyle="{zIndex: 1}">
        <search-field placeholder="请输入地名关键字">
          <input type="text" v-model="keyword"></input>
        </search-field> <!-- 这里指代一个自定义搜索框组件 -->
      </bm-auto-complete>
    </bm-control>
    <bm-local-search :keyword="keyword" :auto-viewport="true" ></bm-local-search>
  </baidu-map>
</template>
<script>
export default {
  name: "map",
  data() {
    return {
      keyword: ''
    }
  }
}
</script>

<style>
.map {
  width: 100%;
  height: 850px;
}
</style>
